<%--
  Created by IntelliJ IDEA.
  User: 86188
  Date: 2020/11/17
  Time: 5:39
  To change this template use File | Settings | File Templates.
--%>
<%@ include file="../common/IncludeTop.jsp"%>

<style>
    *{margin: 0; padding: 0; }
    body {
        font-family: "Microsoft Yahei";
        font-size: 14px;
        color: #333;
        background-color: #E4E1E1;
    }
    a, a:hover { text-decoration: none; color: #333; }
    ul, li { list-style: none; }
    svg{
        fill: currentColor;
    }
    .mt-tabpage-title {
        height: 45px;
        font-size: 0;
        background-color: #fff;
        width: 94%;
        margin: auto;
        background: #fff;
        border-bottom: 1px solid #f1f1f1;
    }
    .mt-tabpage-title .mt-tabpage-item {
        display: inline-block;
        width: 150px;
        height: 45px;
        line-height: 44px;
        text-align: center;
        color: #666;
        font-size: 12px;
    }
    .mt-tabpage-title .mt-tabpage-item:hover{
        color: #eb4537;
    }
    .mt-tabpage-title .mt-tabpage-item-cur {
        color: #eb4537;
        font-size: 14px;
        border-bottom: 1px solid #F85B5E;
    }
    .mt-tabpage-count {
        position: relative;
        width: 700px;
        height: 300px;
        overflow: hidden;
    }
    .mt-tabpage-cont__wrap {
        position: absolute;
    }
    .mt-tabpage-count .mt-tabpage-item {
        width: 800px;
        height: 200px;
        line-height: 200px;
        text-align: center;
    }
</style>


<div id="Catalog"  js-tab="3" >
    <div class="mt-tabpage-title">
        <a href="javascript:;" class="mt-tabpage-item mt-tabpage-item-cur">Payment Details</a>
        <a href="javascript:;" class="mt-tabpage-item">Billing Address</a>
        <a href="javascript:;" class="mt-tabpage-item">Shipping Address</a>
    </div>
    <div class="mt-tabpage-count">
        <ul class="mt-tabpage-cont__wrap">
            <li class="mt-tabpage-item">
                    <table>
                        <tr>
                            <td>Card Type:</td>
                            <td>
                                <select name="cardType">
                                    <c:forEach items="${sessionScope.creditCardTypes}" var="cardType">
                                        <option value="${cardType}">
                                                ${cardType}
                                        </option>
                                    </c:forEach>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>Card Number:</td>
                            <td>
                                <input type="text" name="creditCard" value="${sessionScope.order.creditCard}">
                                * Use a fake number!
                            </td>
                        </tr>
                        <tr>
                            <td>Expiry Date (MM/YYYY):</td>
                            <td>
                                <input type="text" name="expiryDate" value="${sessionScope.order.expiryDate}">
                            </td>
                        </tr>
                    </table>
            </li>
            <li class="mt-tabpage-item">
                <form action="confirmOrder" method="post">
                    <table>
                        <tr>
                            <td>First name:</td>
                            <td>
                                <input type="text" name="firstName" value="${sessionScope.order.billToFirstName}">
                            </td>
                        </tr>
                        <tr>
                            <td>Last name:</td>
                            <td>
                                <input type="text" name="lastName" value="${sessionScope.order.billToLastName}">
                            </td>
                        </tr>
                        <tr>
                            <td>Address 1:</td>
                            <td>
                                <input type="text" name="address1" value="${sessionScope.order.billAddress1}">
                            </td>
                        </tr>
                        <tr>
                            <td>Address 2:</td>
                            <td>
                                <input type="text" name="address2" value="${sessionScope.order.billAddress2}">
                            </td>
                        </tr>
                        <tr>
                            <td>City:</td>
                            <td>
                                <input type="text" name="city" value="${sessionScope.order.billCity}">
                            </td>
                        </tr>
                        <tr>
                            <td>State:</td>
                            <td>
                                <input type="text" name="state" value="${sessionScope.order.billState}">
                            </td>
                        </tr>
                        <tr>
                            <td>Zip:</td>
                            <td>
                                <input type="text" name="zip" value="${sessionScope.order.billZip}">
                            </td>
                        </tr>
                        <tr>
                            <td>Country:</td>
                            <td>
                                <input type="text" name="country" value="${sessionScope.order.billCountry}">
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
                            <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
                        </tr>
                    </table>
                    <input type="submit" value="Continue">
                </form>
            </li>
            <li class="mt-tabpage-item">
                <form action="confirmShip" method="post">
                    <table>
                        <tr>
                            <td>First name:</td>
                            <td><input type="text" name="shipToFirstName" value="${sessionScope.order.shipToFirstName}"/></td>
                        </tr>
                        <tr>
                            <td>Last name:</td>
                            <td><input type="text" name="shipToLastName" value="${sessionScope.order.shipToLastName}"/></td>
                        </tr>
                        <tr>
                            <td>Address 1:</td>
                            <td><input type="text" size="40" name="shipAddress1" value="${sessionScope.order.shipAddress1}"/></td>
                        </tr>
                        <tr>
                            <td>Address 2:</td>
                            <td><input type="text" size="40" name="shipAddress2" value="${sessionScope.order.shipAddress2}"/></td>
                        </tr>
                        <tr>
                            <td>City:</td>
                            <td><input type="text" name="shipCity" value="${sessionScope.order.shipCity}"/></td>
                        </tr>
                        <tr>
                            <td>State:</td>
                            <td><input type="text" size="4" name="shipState" value="${sessionScope.order.shipState}"/></td>
                        </tr>
                        <tr>
                            <td>Zip:</td>
                            <td><input type="text" size="10" name="shipZip" value="${sessionScope.order.shipZip}"/></td>
                        </tr>
                        <tr>
                            <td>Country:</td>
                            <td><input type="text" size="15" name="shipCountry" value="${sessionScope.order.shipCountry}"/></td>
                        </tr>
                        <tr>
                            <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
                            <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
                        </tr>
                    </table>
                    <input type="submit" name="newOrder" value="Continue"/>
                </form>
            </li>
        </ul>
    </div>
</div>

<script src="js/order.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('[js-tab=3]').tab({
            curDisplay: 1,
            changeMethod: 'horizontal'
        });
    });
</script>



<%@ include file="../common/IncludeButtom.jsp"%>